import { useState } from 'react'
import { View, Image, Text } from '@tarojs/components'
import { get } from '../../../axios/aiaxios/request'
import { useLoad } from '@tarojs/taro'
import Taro from '@tarojs/taro'
import { uploadImage } from '../../../services/uploadService'
import FunctionButtons from '../../../components/FunctionButtons'
import './Main.scss'

interface ApiResponse {
  code: number
  data: Array<{
    img: string
    name: string
  }>
  message?: string
}

export default function Main() {
  const [img, setImg] = useState('')
  const [uploading, setUploading] = useState(false)
  
  const getimgs = async () => {
    try {
      const res = await get('/aiimg/getByName')
      console.log('响应数据:', res)
      
      // 类型断言，确保res符合我们期望的结构
      const apiRes = res as unknown as ApiResponse
      
      // 由于响应拦截器返回了response.data，所以直接访问res
      if (apiRes.code === 200 && apiRes.data && apiRes.data.length > 0) {
        setImg(apiRes.data[0].img)
      } else {
        console.log('没有找到图片数据')
      }
    } catch (error) {
      console.error('获取图片失败:', error)
    }
  }
  
  // 按钮点击处理函数
  const handleMirrorFaceClick = async () => {
    try {
      console.log('点击了魔镜测脸')
      
      // 检查相机权限（如果用户选择拍照会需要）
      const authSetting = await Taro.getSetting()
      
      if (authSetting.authSetting['scope.camera'] === false) {
        // 用户之前拒绝了相机权限，但仍可以选择相册
        const result = await Taro.showModal({
          title: '相机权限',
          content: '开启相机权限可以直接拍照，不开启也可以选择相册中的照片',
          showCancel: true,
          cancelText: '仅相册',
          confirmText: '去设置'
        })
        
        if (result.confirm) {
          await Taro.openSetting()
          return
        }
        // 如果选择"仅相册"，继续执行，但限制只能选择相册
      }

      // 调用系统相机，可选择相册
      const cameraResult = await Taro.chooseMedia({
        count: 1,
        mediaType: ['image'],
        sourceType: ['camera', 'album'], // 允许相机和相册
        camera: 'front', // 默认使用前置摄像头
        sizeType: ['compressed'] // 压缩图片
      })

      if (cameraResult.tempFiles && cameraResult.tempFiles.length > 0) {
        const tempFile = cameraResult.tempFiles[0]
        console.log('选择图片成功，临时文件路径:', tempFile.tempFilePath)
        console.log('图片大小:', tempFile.size)
        console.log('图片类型:', tempFile.type)
        
        // 上传图片到后端
        await uploadPhotoToServer(tempFile.tempFilePath, tempFile.size, tempFile.type)
      }
    } catch (error: any) {
      console.error('调用相机失败:', error)
      
      if (error.errMsg && error.errMsg.includes('auth deny')) {
        Taro.showModal({
          title: '权限被拒绝',
          content: '无法访问相机，请检查小程序权限设置',
          showCancel: false
        })
      } else if (error.errMsg && error.errMsg.includes('cancel')) {
        // 用户取消选择，不显示错误提示
        console.log('用户取消了选择')
      } else {
        Taro.showToast({
          title: '打开相机/相册失败',
          icon: 'none'
        })
      }
    }
  }

  // 上传照片到服务器
  const uploadPhotoToServer = async (filePath: string, fileSize?: number, fileType?: string) => {
    try {
      setUploading(true)
      
      Taro.showLoading({
        title: '正在上传照片...'
      })

      console.log('开始上传照片到服务器...')
      const uploadResult = await uploadImage(filePath, '魔镜测脸')
      
      Taro.hideLoading()

      if (uploadResult.code === 200) {
        Taro.showToast({
          title: '照片上传成功',
          icon: 'success',
          duration: 2000
        })
        
        console.log('照片上传成功:', uploadResult.data)
        
        // 上传成功后跳转到TensorFlow页面
        if (uploadResult.data?.id) {
          // 延迟跳转，让用户看到成功提示
          setTimeout(() => {
            Taro.navigateTo({
              url: `/pages/ai/TensorFlow/TensorFlow?imageId=${uploadResult.data.id}`
            })
          }, 1000)
        }
      } else {
        throw new Error(uploadResult.message || '上传失败')
      }
    } catch (error: any) {
      Taro.hideLoading()
      console.error('照片上传失败:', error)
      
      let errorMessage = '照片上传失败'
      if (error.message) {
        errorMessage = error.message
      }
      
      Taro.showToast({
        title: errorMessage,
        icon: 'none',
        duration: 3000
      })
    } finally {
      setUploading(false)
    }
  }

  const handleEyeTestClick = () => {
    console.log('点击了PK测眼型')
    // 这里可以添加具体的导航逻辑
  }

  const handleFaceAnalysisClick = () => {
    console.log('点击了面部分析')
    // 这里可以添加具体的导航逻辑
  }
  
  useLoad(() => {
    getimgs()
  })
  
  return (
    <View className='main-container'>
      {/* 顶部图片展示区 */}
      <View className='image-section'>
        <Image 
          src={img} 
          className='main-image'
          mode='aspectFill'
        />
        <View className='image-overlay'>
          <Text className='overlay-text'>AI智能美学分析</Text>
        </View>
      </View>
      
      {/* 功能按钮区域 */}
      <FunctionButtons 
        onMirrorFaceClick={handleMirrorFaceClick}
        onEyeTestClick={handleEyeTestClick}
        onFaceAnalysisClick={handleFaceAnalysisClick}
      />
      
      {/* 底部推广信息 */}
      <View className='promotion-section'>
        <View className='promotion-card'>
          <View className='promotion-header'>
            <Text className='promotion-title'>看脸解读报告</Text>
            <View className='promotion-footer'>
              <Text className='promotion-price'>¥19.9</Text>
              <Text className='promotion-offer'>限时0元领</Text>
            </View>
          </View>
          <Text className='promotion-subtitle'>由新氧AI Lab实验室联合新氧好医打造</Text>
        </View>
      </View>
      
      {/* 底部统计信息 */}
      <View className='bottom-stats'>
        <Text className='stats-text'>已为 311,995,893 位用户提供美学方案</Text>
        <Text className='stats-text'>我们会充分保障您的人脸信息安全，请放心使用</Text>
      </View>

    </View>
  )
}
